Q1: JSX 是什麼？

JSX是JavaScript的語法擴充。
JSX 外觀結構看似 HTML，但實質上並不是 HTML 語法，而是 React 中一個特殊的語法糖，讓開發者能使用熟悉的 HTML 寫法來開發專案。

原本HTML、CSS、JS 3個檔分別放內容、樣式、邏輯。
但因為網頁互動增加，JS掌控HTML。
因此，在React中，把渲染邏輯和標記放在同個地方，一個元件中。
<mark> You will learn - * 為什麼React混合標記與渲染邏輯 </mark>
e.g.: 按鈕的渲染邏輯和標記保持放在一起

=> 好處 1: 確保在每次編輯時保持同步。
=> 好處 2: 元件間彼此分開，按鈕的markup和側邊欄的markup，更改時不會彼此被影響。

JSX與HTML有何不同

<mark> You will learn - * JSX與HTML有何不同 </mark>

每個 React 元件都是一個 JavaScript 函式，可能包含一些標記，React 將其渲染到瀏覽器中
React 組件使用名為 JSX 的語法擴展來表示標記。
JSX 看起來很像 HTML，但JSX 更嚴格且可以動態呈現資訊。

注意 JSX 和 REACT 是不同的事

通常在一起使用，但可以個別獨立使用。

JSX 是 JavaScript的語法擴充，然而 React 是JavaScript的框架。

瀏覽器不能直接理解 JSX
因此大多數 React 使用者依賴編譯器compiler ，如 Babel 或 TypeScript，
將 JSX code 轉換為 regular JavaScript。
許多預配置的工具套件，如 Create React App 或 Next.js，在內部也有 JSX 轉換。

編譯器 compiler - 一次解析完所有的程式碼，並產出特定格式的檔案後，才能執行。
直譯器 interpreter - 當每行程式碼解析完後就立刻執行。

Q2: JSX 使用上的 3 項規則

<mark> You will learn - * 如何使用JSX顯示資訊 </mark>

只會回傳一個根元素
嚴格標籤閉合
命名 HTML 屬性 (attribute)時，使用 camelCase 來命名。

Pro-tip: Use a JSX Converter

理解每一項規則的限制及原因，確保自己能在使用 JSX 時遵守這三個使用規則。

1. 只會回傳一個根元素

一個元件 return 多個元素(element)時，要以 single parent tag 把多個元素包起來。
可以是<div>...</div> 或 <>... </> (稱為 Fragment)

DEEP DIVE - Q: 為什麼多個元素(element)，需要以 single parent tag 包覆?

A: JSX看似HTML，但底層轉換為 plain JavaScript Object。
一個函式若沒有把 2 objects 包成一個陣列，是無法return 2 objects。
因此，要return 多個 JSX，就要以 single parent tag 將多個 JSX 包起來。

2. 嚴格標籤閉合

JSX要求標籤必須明確地關閉

self-closing tags : <img> => <img />
wrapping tags : <li>oranges</li>

3. 用camelCase來命名大部分的東西！

JSX 會轉換成 JavaScript，而 在 JSX 中寫的attribute屬性會變成=> JavaScript 物件的鍵。
在元件中，通常會想將這些 attribute屬性讀入變數中。??
但 JavaScript 對變數名稱有限制
- 1 變數名稱不能包含 "-"
- 2 不能是保留字reserved word，例如 class。
  Pitfall
  aria-*和 data-* 屬性，例外，如同在HTML中使用。

因此在 React 中，許多 HTML 和 SVG 屬性都使用駝峰式命名法。
e.g.:使用 strokeWidth 而不是 stroke-width。
由於 class 是一個保留字，在 React 中需要寫成 className，其名稱與對應的 DOM 屬性相同：

在 DOM 元件屬性列表中可以找到所有這些屬性。

Q3: 如何將 HTML 轉換為 JSX，並能看懂 error messages 中的語法錯誤建議

JSX tag 屬性 => camelCase
JSX tag 閉合
return 多個JSX 需要single parent tag(<div>...</div>或<>...</>)

Exit Tickets

Q4: JSX 語法與 HTML 語法兩者的關係是什麼？

JSX 是JS的語法擴充，實質是JS的物件。
JSX 和 HTML 看起來相似，但比HTML嚴謹許多，也有使用上的規則限制。

Q5: JSX 語法糖在經過轉換後的本質是什麼？

JSX 轉換後為 JS的物件。
JSX tag 的屬性attribute 轉換為 JS物件的鍵key

Q6:為什麼 HTML 中的 class 屬性在 React element 中的對照 prop 會改名為 className ?

因為 JSX tag 的屬性attribute 轉換為 JS物件的鍵key，
屬性會傳入變數中使用。
JS對變數名稱有限制，不可有-(dash)、不可有保留字(reserved word)
因此 React 中的屬性以camelCase命名。
HTML 的 class屬性，屬性名稱為保留字，所以在React中改為className。

3. React 語法糖：JSX